<template>
	<view class="content">
		<!-- <view class="head">
			<input class="head_input" v-model="nicheng" confirm-type="search" @confirm="search()" placeholder-style="font-size: 30upx; text-align: center;background-position: 16% 50%; background-size:5%; background-repeat:no-repeat; background-image: url('../../static/image/search.png');"
			 placeholder="请输入您要搜索的成员姓名" />
		</view> -->
		<view class="grid_header">
			<view class="grid_content">
				<view class="grid_content_item1 item1_wid">姓名</view>
				<view class="grid_content_item1 item2_wid">性别</view>
				<view class="grid_content_item1 item3_wid">昵称</view>
				<!-- <view class="grid_content_item1 item3_wid">加入时间</view> -->
			</view>
		</view>
		
		<view class="scroll_box" scroll-y>
			<view class="memberNone" v-if="mockList.length == 0">暂无相关成员</view>
			<!-- <radio-group @change="radioChange" v-else > -->
				<view v-else>
				<block v-for="(item, index) in mockList" :key="index">
					<view class="grid_scroll_header">
						<view class="grid_content1">
							<view class="grid_content_item item1_wid">
								<view class="item1_avatar_img">
									<image :src="item.avatar"></image>
								</view>
								<view class="item1_name" v-if="item.nicheng !==''">{{item.nicheng}}</view>
								<view class="item1_name" v-else>无信息</view>
							</view>
							<view class="grid_content_item item2_wid" v-if="item.sex === 2">女</view>
							<view class="grid_content_item item2_wid" v-if="item.sex === 1">男</view>
							<view class="grid_content_item item3_wid">
								<!-- <text>{{item.teach_subject_name}}老师<text class="color">*</text></text> -->
								<text>{{item.nicheng}}老师</text>
							</view>
							<!-- <view class="grid_content_item item3_wid" v-if="item.users_type == 1">学生</view> -->
							<!-- <i v-if="item.users_type == 1" class="iconfont iconshuju" @tap="everyDay(item.user_id)"></i>
							<radio :value="item.user_id" v-if='isDelete || isTransfer'/> -->
						</view>
					</view>
				</block>
				</view>
			<!-- </radio-group> -->
		</view>
<!-- 		<view class="footer" v-if='isDelete'>
			<view class="footer-left">已选<text>{{num}}</text>个</view>
			<view class="footer-right">
				<text @click="cancelClick">取消</text>
				<text @click="deleteClick">删除</text>
			</view>
		</view>
		<view class="footer" v-if='isTransfer'>
			<view class="footer-left">已选<text>{{num}}</text>个</view>
			<view class="footer-right">
				<text @click="cancelClick">取消</text>
				<text @click="moveClick">转移</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import cDate from '@/common/util.js';
	import lazyImage from "@/components/lazy-image.vue";
	export default {
		data() {
			return {
				founder_user_id: '',
				member_type: '',
				avatarAdd: this.defimg,
				// titledata: [
				// 	// {pic: 'iconfont icontianjiachengyuan moreI',title:'添加成员'},
				// 	{pic: 'iconfont iconshanchu1 moreI',title:"删除成员"},
				// 	{pic: 'iconfont iconzhuanyiqunzhu moreI',title:"转移班级"}
				// ],
				head:false,
				mockList: [],
				classroom_id: 0,
				nicheng: '',
				currentNav: 0,
				user_type: 2,
				navList: [
					{title: '老师'},
					{title: '学生'}
				],
				// isDelete: false, //转移班级模块
				// deleteId: '',
				// num: 0,
				// isTransfer: false //转移班级模块
			}
		},
		components: {
			lazyImage
		},
		// onNavigationBarButtonTap() {
		// 	this.head=!this.head;
		// },
		onNavigationBarButtonTap: function() {
			uni.switchTab({
				url: '../index/index'
			})
		},
		onLoad: function(e) {
			this.classroom_id = e.classroom_id;
			this.founder_user_id = e.founder_user_id;
			this.member_type = e.member_type;
			this.getList(this.nicheng);
		},
		methods: {
			search: function() {
				this.getList(this.nicheng);
			},
			navClick(index) {
				this.currentNav = index;
				if(index == 0) {
					this.user_type = 2;
					this.nicheng = '';
				} else if(index == 1) {
					this.user_type = 1;
					this.nicheng = '';
				}
				this.getList(this.nicheng);
			},
			getList: function(nicheng) {
				var data = {
					groupid: this.groupid,
					users_type: this.user_type
				};
				if (nicheng != '') {
					data.nicheng = nicheng;
				}
				/**
				 * 群成员列表
				 */
				this.$zapi.apiPost('user/Grade.User/classroomMember', {classroom_id:this.classroom_id,pagesize: 10}).then(res => {
					
					if(res.data.data) {
						this.mockList = res.data.data.data;
						for (let i = 0; i < this.mockList.length; i++) {
							if(this.mockList[i].teach_subject_name == null) {
								this.mockList[i].teach_subject_name = "**"
							}
							if(this.mockList[i].avatar == '') {
								this.mockList[i].avatar = this.defimg;
							}
						}
					} else {
						this.mockList = [];
					}
				});
			},
			/* 导航栏右侧按钮操作 */
			gotocreate:function(index){
				this.head =! this.head;
				this.isDelete = false;
				this.isTransfer = false;
// 				if(index == 0){
// 					this.head = false;
// 				}
				if(index == 0){
					this.isDelete = true;
				}
				if(index == 1) {
					this.isTransfer = true;
				}
			},
			closeNavSwitch() {
				this.head = false;
			},
			/* 判断选中 */
			// radioChange(evt) {
			// 	this.deleteId = evt.target.value;
			// 	this.num = 1;
			// },
			/* 取消删除 */
			// cancelClick() {
			// 	this.isDelete = false;
			// 	this.isTransfer = false;
			// 	this.num = 0;
			// },
			/* 删除成员 */
			// deleteClick() {
			// 	if(this.member_type != 1) {
			// 		uni.showToast({
			// 			title: '您没有该权限'
			// 		})
			// 	} else {
			// 		var data = {
			// 			groupid: this.groupid,
			// 			TransferId: this.deleteId
			// 		}
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '确定删除吗？',
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					this.$zapi.apiPost('user/Grade.User/GradeMemberKo',data).then(res => {
			// 						uni.showToast({
			// 							title: res.data.msg,
			// 							icon: 'none'
			// 						})
			// 						this.getList(this.nicheng);
			// 					})
			// 				}
			// 			}
			// 		})
					
				// }
			// },
			// 转移班级
			// moveClick() {
			// 	var _this = this
			// 	var data = {
			// 		groupid: this.groupid,
			// 		TransferId: this.deleteId
			// 	}
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确定转移吗？',
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				_this.$zapi.apiPost('user/Grade.User/GradeTransfer',data).then(res => {
			// 					uni.showToast({
			// 						title: res.data.msg,
			// 						icon: 'none'
			// 					})
			// 					_this.getList(_this.nicheng);
			// 					if(res.data.code == 200) {
			// 						_this.isTransfer = false;
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			// everyDay(user_id) {
			// 	uni.navigateTo({
			// 		url: '../user/everyStudy?user_id='+user_id
			// 	})
			// }
		}
	}
</script>

<style>
	.pop_bg {
		position: fixed;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}
	.pop_bg_item1 {
		position: absolute;
		right: 20upx;
		margin-top: 20upx;
		width:30%;
		background-color: #ffffff;
		border-radius: 5upx;
	}
	.pop_bg_item1:before {
		content: "";
		position: absolute;
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
		top: -30upx;
	}
	.pop_bg_item_left:before {
		right: 5%;
	}
	.left_item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		padding: 15upx 0;
		/* border-bottom: 1px solid #e5e5e5; */
		color: #333333;
		line-height: 1.2;
	}
	.moreI{
		font-size: 40upx !important;
		margin: 0 10upx 0 0 !important;
		-webkit-text-fill-color: #333333 !important;
	}
	.head {
		/* z-index: 999; */
		height: 100upx;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		display: flex;
		align-items: center;
		z-index: 1;
	}

	.head_input {
		width: 92%;
		height: 60upx;
		margin: 20upx auto;
		background: #FAFAFA;
		border-radius: 12upx;
		padding-left: 30upx;
	}

	.content {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	
	.nav {
		width: 100%;
		height: 90upx;
		background: #ffffff;
		position: fixed;
		z-index: 1;
		top: 100upx;
		border-bottom: 20upx solid #FAFAFA;
	}
	
	.nav_box {
		display: flex;
		justify-content: space-around;
	}
	
	.nav_item {
		display: flex;
		align-items: center;
		padding: 0 30upx;
		align-items: center;
		justify-content: center;
		height: 86upx;
		font-size: 36upx;
	}
	
	.nav_active {
		color: #FF9900;
		border-bottom: 4upx solid #FF9900;
	}

	.grid_header {
		/* z-index: 999; */
		/* margin-top: 210upx;
		position: absolute; */
		width: 100%;
		background-color: #FFFFFF;
		color: #FF9900;
		font-size: 36upx;
		z-index: -1;
	}

	.grid_content {
		width: 92%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80upx;
	}

	.grid_content1 {
		width: 92%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
	}

	.item1_avatar_img {
		width: 50upx;
		height: 50upx;
		margin-right: 10upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.item1_avatar_img image {
		width: 100%;
		height: 100%;
		background-size: contain;
		position: static !important;
	}

	.grid_content_item1 {
		border-left: 6upx solid #FF9900;
		height: 35upx;
		line-height: 35upx;
	}

	.item1_wid {
		width: 40%;
		padding-left: 10upx;
	}

	.item2_wid {
		width: 15%;
		padding-left: 10upx;
	}

	.item3_wid {
		width: 45%;
		padding-left: 10upx;
	}
	.grid_content1 .item3_wid{
		width: 40%;
		padding-left: 20upx;
	}
	.iconshuju{
		color: #FF9900;
		font-size: 36upx;
	}
	.color{
		color: #00ACFE;
		font-weight: bold;
		margin-left: 4upx;
	}
	.scroll_box {
		z-index: 0;
		/* margin-top: 280upx; */
		height: calc(100%-185upx);
		margin-bottom: 150upx;
		z-index: -1;
	}
	.memberNone{
		color: #999999;
		text-align: center;
		margin-top: 100upx;
	}

	.grid_content_item {
		display: flex;
		align-items: center;
	}

	.grid_scroll_header:nth-child(odd) {
		background-color: #ffffff;
		width: 100%;
		height: 100%;
	}

	.grid_scroll_header:nth-child(even) {
		background:rgba(255,153,0,0.05);
	}
	radio-group label{
		padding-right: 0;
	}
	radio{
		line-height: 100upx;
		position: absolute;
		right: 30upx;
		transform: scale(0.8);
	}
	.wx-radio-input{
		border: 2upx solid #999999 !important;
	}
	.wx-radio-input.wx-radio-input-checked{
		border: 2upx solid #00ACFE !important;
		background: #00ACFE !important;
	}
	.wx-radio-input.wx-radio-input-checked:before{
		color: #FFFFFF;
	}
	.footer{
		width: 100%;
		height: 100upx;
		box-shadow:0px -1px 1px rgba(0,0,0,0.1);
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	.footer-left{
		margin-left: 30upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #333333;
	}
	.footer-left text{
		color: #00ACFE;
		font-size: 38upx;
	}
	.footer-right text{
		padding-left: 60upx;
		margin-right: 60upx;
		line-height: 100upx;
		color: #00ACFE;
		font-size: 34upx;
	}
	.footer-right text:last-child{
		color: #FF9900;
		border-left: 2upx solid #E5E5E5;
		margin-right: 30upx;
	}
</style>
